<template>
  <div class="container-big">
    <div style="padding-bottom: 136px;" class="container">
      <banner />
      <!-- <div class="uncan-right" /> -->
      <div class="orderEnter-box">
        <div class="order-tit">
          购票人信息
        </div>
        <div class="from-box">
          <div class="from-tit ">
            <img class="from-tit-img" src="https://gw.alicdn.com/tfs/TB1vpgTHcbpK1RjSZFyXXX_qFXa-200-200.png">
            温馨提示:请在购票完成后通过钉钉进入票务系统。
          </div>
          <div v-for="(item, index) in $store.state.buyTicket.carTicketList" :key="index" class="from">
            <div class="from-head">
              <div class="from-head-bar" />
              <div class="from-head-tit-box cenLeft">
                <div class="from-head-tit">
                  {{ item.body_ticket[0].tname }}
                </div>
                <div class="from-head-date">
                  {{ $moment(item.body_ticket[0].stime).format('MM月DD日') }}- {{ $moment(item.body_ticket[0].etime).format('MM月DD日') }} {{ item.body_ticket[0].tTypeDate }}
                </div>
              </div>
              <div class="from-ticket-sum cenBet">
                <div class="from-head-num-box cenLeft">
                  <span class="num-num">
                    x {{ item.body_ticket.length }} 张
                  </span>
                </div>
                <div class="from-head-sum-num cenRig">
                  合计¥
                  <div class="from-head-sum-num-price">
                    {{ (Number(item.body_ticket[0].eprice)*item.body_ticket.length).toFixed(2) }}
                  </div>
                  元
                </div>
              </div>
            </div>
            <div class="from-item">
              <div v-for="(useTicketPople, ind) in item.useTicketPople" :key="ind" class="from-input-box" style=" border-bottom: 1px solid rgba(151, 151, 151, 0.2);" @click="enterUseTicketPople(useTicketPople);">
                <div class="from-input-tit cenLeft ">
                  用票人{{item.useTicketPople.length>1?ind+1:''}}
                </div>
                <div v-if="useTicketPople.userData&&useTicketPople.userData.formJson" class="from-input-other cenRig">{{initFiledValue(useTicketPople.userData.formJson) }} </div>
                <!-- <input v-if="useTicketPople.userData&&useTicketPople.userData.formJson" v-model="useTicketPople.userData.formJson[0].attribute.filedValue" placeholder="请填写用票人信息" style=" cursor: pointer;text-align: right;" readonly="readonly" type="text" class="from-input "> -->
                <input v-else placeholder="请填写用票人信息" style=" cursor: pointer;text-align: right;" readonly="readonly" type="text" class="from-input ">
                <div style=" cursor: pointer;" class="from-input-right-icon cenCen">
                  <img src="https://gw.alicdn.com/tfs/TB1pQsSHmzqK1RjSZFHXXb3CpXa-200-200.png">
                </div>
              </div>
            </div>
          </div>
          <!-- 单独：类似申请发票-->
          <div style="min-height: 20px;" class="from">
            <div class="from-item ">
              <div class="from-input-box">
                <div class="from-input-tit cenLeft ">
                  申请发票
                </div>
                <div class="from-input-invoice ">
                  <p class="cenRig">{{invoiceOne}}</p>
                  <p class="cenRig">{{invoiceTwo}}</p>
                </div>
                <!-- <input v-model="invoice" style="color:#AFAFB0; text-align:right;" type="text" class="from-input "> -->
                <!-- <div style=" cursor: pointer;" class="from-input-right-icon cenCen">
                  <img src="https://gw.alicdn.com/tfs/TB1pQsSHmzqK1RjSZFHXXb3CpXa-200-200.png">
                </div> -->
              </div>
            </div>
          </div>
          <!-- 服务协议 -->
          <div class="agree-box">
            阅读并同意
            <a v-if="aHref" target="_blank" :href="aHref">《购票服务协议》</a>
            <span v-else @click="getgetAgeree()">《购票服务协议》</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部购物车付款 -->
    <div class="screen-fixed-box cenCen">
      <div style="background: #313339;" class="goods-box cenBet">
        <div class="goods cenCen">
          <div class="goods-con-box">
            <div class="goods-con-tit">
              <span class="actualPrice-enter">
                <span style="font-size: 12px;">¥</span>
                <span>{{ $store.state.buyTicket.actualPrice }}</span>
                <span style="font-size: 12px;">元</span>
              </span>
              <a v-if="$store.state.buyTicket.actualPrice!=$store.state.buyTicket.totalPrice " style=" text-decoration: none;text-decoration: none;font-size: 12px;" href="javascript:void(0);" class="originalPrice">
                已优惠
              </a>
              <a v-if="$store.state.buyTicket.actualPrice!=$store.state.buyTicket.totalPrice " href="javascript:void(0);" style="text-decoration: none;" class="originalPrice-enter-a">
                <span style="font-size: 12px;">¥</span>
                <span>¥{{ Number($store.state.buyTicket.totalPrice-$store.state.buyTicket.actualPrice).toFixed(2) }}</span>
                <span style="font-size: 12px;">元</span>
              </a>
            </div>
            <div class="goods-con-con">
              已经选购{{ $store.state.buyTicket.carTicketSumList.length }}张
            </div>
          </div>
        </div>
        <div @click="checkPay()" class="submit-btn cenCen">
          <div>
            同意并付款
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import services from "../../api/profile.js";
import banner from "./banner/banner";
import { getUrlParameter } from "./../../router/publicJs/getUrlParameter.js"; // 得到url 参数并且赋值
import buyTicketService from "./../../api/buyTicketService.js";
import { storageCar } from "./../publicJs/storageCar.js";
export default {
  components: {
    banner
  },
  data() {
    return {
      ifClick: true, //是否可以点击，防止重复点击
      invoice: "大会结束后1天在“个⼈中⼼-订单详情”进行申请",
      invoiceOne: "大会结束后1天在“个⼈",
      invoiceTwo: "中⼼-订单详情”进行申请",
      aHref: ""
    };
  },
  created() {
    this.initFun();
  },
  methods: {
    // 初始化字段
    initFiledValue(formJson) {
      let value = "";
      for (let i = 0; i < formJson.length; i++) {
        if (formJson[i].attribute.filedCode == "uName") {
          value += "  " + formJson[i].attribute.filedValue;
        }
        if (formJson[i].attribute.filedCode == "company") {
          value += " | " + formJson[i].attribute.filedValue;
        }
      }
      return value ? value : formJson[0].attribute.filedValue || "";
    },
    async initFun() {
      storageCar();
      let res = await getUrlParameter();
      this.getgetAgeree();
      // console.log(this.$store.state.buyTicket.carTicketList);
      // console.log(this.$store.state.buyTicket.carTicketSumList);
    },
    // 获取服务协议
    getgetAgeree() {
      buyTicketService
        .getAgeree(
          this.$store.state.buyTicket.corpId,
          this.$store.state.buyTicket.agereeId
        )
        .then(res => {
          this.aHref = res.result;
        });
    },
    // 查询用票人信息列表
    getuserTicketList() {
      return new Promise(resolve => {
        services.getUserList().then(data => {
          this.$store.state.buyTicket.userTicketList = data || [];
          resolve("ok");
        });
      });
    },
    // 检验支付，是否信息填写完成
    async checkPay() {
      if (!this.ifClick) {
        return;
      }
      this.ifClick = false;
      setTimeout(() => {
        this.ifClick = true;
      }, 3000);
      // this.$router.push({
      //   path: "/infoEntry"
      // });
      // return;
      if (this.$store.state.buyTicket.carTicketSumList.length == 0) {
        this.$toast("您需要选择购票");
        return;
      }
      let carTicketList = this.$store.state.buyTicket.carTicketList;
      for (let i = 0; i < carTicketList.length; i++) {
        for (let j = 0; j < carTicketList[i].useTicketPople.length; j++) {
          if (
            !carTicketList[i].useTicketPople[j].userData ||
            !carTicketList[i].useTicketPople[j].userData.id
          ) {
            this.$toast(
              `请填写${carTicketList[i].body_ticket[0].tname}用票人${
                carTicketList[i].useTicketPople.length > 1 ? j + 1 : ""
              }信息`
            );
            return;
          }
          let userTicketList = this.$store.state.buyTicket.userTicketList || [];
          if (userTicketList.length == 0) {
            this.$store.state.loading = true;
            let getuserTicketListRes = await this.getuserTicketList();
            this.$store.state.loading = false;
          }
          let checkUserTicketListRes = await this.checkUserTicketList(
            carTicketList[i].useTicketPople[j].userData.id,
            userTicketList
          );
          if (!checkUserTicketListRes) {
            this.$toast(
              `请重新填写${carTicketList[i].body_ticket[0].tname}用票人${
                carTicketList[i].useTicketPople.length > 1 ? j + 1 : ""
              }信息`
            );
            return;
          }

          // let userData = carTicketList[i].useTicketPople[j].userData.formJson;
          // // 检验用票人信息是否都已经填写过表单
          // if (!userData) {
          //   this.$toast(
          //     `请填写${carTicketList[i].body_ticket[0].tname}用票人${j + 1}信息`
          //   );
          //   return;
          // } else {
          //   let res = await this.checkUserPopleFrom(
          //     userData,
          //     carTicketList[i].body_ticket[0].tname,
          //     j + 1
          //   );
          //   if (!res) {
          //     return;
          //   }
          // }
        }
      }
      //  // 同意并付款生成订单
      this.$store.state.loading = true;
      buyTicketService
        .checkPay(this.$store.state.buyTicket.carTicketList)
        .then(res => {
          this.$store.state.loading = false;
          if (res.success) {
            this.$router.push({
              path: "/orderDetail",
              query: {
                orderId: res.result.orderId
              }
            });
          } else {
            // this.$toast(res.errorMsg);
          }
        });
    },
    // 检验当前添加的用票人信息是否是本人手机号的，防止cookie问题导致数据不对
    checkUserTicketList(id, userTicketList) {
      return new Promise(resolve => {
        let value = false;
        for (let i = 0; i < userTicketList.length; i++) {
          // 查询id是否可以找到
          if (id == userTicketList[i].id) {
            value = true;
            break;
          }
        }
        resolve(value);
      });
    },
    // 检验用票人信息表单是否必填项都已经填写
    checkUserPopleFrom(userData, tname, index) {
      return new Promise(resolve => {
        let ifOk = true; //是否已经填写可以通过
        for (let q = 0; q < userData.length; q++) {
          if (
            userData[q].attribute.ifCheck &&
            !userData[q].attribute.filedValue
          ) {
            this.$toast(
              `${tname}用票人${index}${
                userData[q].attribute.placeholder
                  ? userData[q].attribute.placeholder
                  : "请填写"
              }${userData[q].attribute.titName}`
            );
            ifOk = false;
            resolve(ifOk);
            return;
          }
        }
        resolve(ifOk);
      });
    },
    // 填写用票人信息
    async enterUseTicketPople(useTicketPople) {
      this.$store.state.buyTicket.useTicketPopleId =
        useTicketPople.useTicketPopleId;
      this.$router.push({
        name: "UserList",
        query: {
          action: "select"
        }
      });
    }
  }
};
</script>

<style >
.orderEnter-box {
  width: 100%;
  height: auto;
  margin-top: 10px;
}
.order-tit {
  width: 100%;
  height: auto;
  text-align: left;
  /* font-family: PingFangSC-Regular; */
  font-size: 44px;
  color: #ffffff;
  padding: 0px 5%;
  margin: 0px;
}
.from-box {
  width: 100%;
  height: auto;
  padding: 0px 5%;
}
.from-tit {
  width: 100%;
  height: auto;
  text-align: left;
  /* font-family: PingFangSC-Regular; */
  font-size: 22px;
  color: #b9b9bb;
  position: relative;
  text-indent: 36px;
  margin-top: 16px;
  margin-bottom: 26px;
}
.from-tit-img {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 26px;
  height: auto;
  margin-right: 6px;
}
.from {
  width: 100%;
  height: auto;
  /* min-height: 160px; */
  background: rgba(0, 0, 0, 0.4);
  /* border: 1px solid rgba(93, 93, 93, 0.2); */
  /* border: 1px solid #38383b; */
  margin-top: 26px;
  border-radius: 8px 8px 6px 6px;
}
.from-head {
  width: 100%;
  height: auto;
  min-height: 130px;
  padding-bottom: 13px;
  background: #282b31;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  position: relative;
}
.from-head-bar {
  width: 100%;
  height: 9px;
  opacity: 0.8;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  opacity: 0.8;
  background-image: linear-gradient(
    -67deg,
    #00e7be 0%,
    #19b1df 44%,
    #2389f6 91%
  );
}
.from-head-tit-box {
  width: 100%;
  height: auto;
  text-align: left;
  padding: 16px 20px 6px 20px;
  flex-wrap: wrap;
}
.from-head-tit {
  /* font-family: PingFangSC-Medium; */
  font-size: 32px;
  color: #ffffff;
  margin-right: 16px;
}
.from-head-date {
  opacity: 0.8;
  /* font-family: PingFangSC-Regular; */
  font-size: 20px;
  color: #ffffff;
  margin-top: 3px;
}
.from-ticket-sum {
  width: 100%;
  height: auto;
}
.from-head-num-box {
  width: 100%;
  height: auto;
  padding: 0px 20px;
}

.from-head-sum-num {
  /* font-family: PingFangSC-Regular; */
  font-size: 20px;
  color: #ffffff;
  min-width: 360px;
  width: auto;
  height: auto;
  padding-right: 26px;
}
.from-head-sum-num-price {
  /* font-family: PingFangSC-Medium; */
  font-size: 32px;
  color: #ffffff;
  margin: 0px 10px;
}
.num-num {
  /* font-family: PingFangSC-Regular; */
  font-size: 24px;
  color: #ffffff;
}
.from-item {
  padding: 0px 18px;
  width: 100%;
  height: auto;
}
.from-item > div:last-of-type {
  border-bottom: none;
}

.haveBot {
  border-bottom: 1px solid rgba(151, 151, 151, 0.2);
}
/* 组件input样式 */
.from-input-box {
  width: 100%;
  height: auto;
  min-height: 100px;
  position: relative;
  border-bottom: 1px solid rgba(151, 151, 151, 0.2);
  padding: 6px 1px;
}
.from-input-tit {
  width: auto;
  max-width: 166px;
  height: auto;
  min-height: 100px;
  /* font-family: PingFangSC-Regular; */
  font-size: 28px;
  color: #ffffff;
  text-align: left;
  padding: 1px 0px 0px 0px;
}
.from-input-tit-check {
  color: #0ce4a2;
  margin-right: 1px;
}
.checkNot {
  opacity: 0;
}
.from-input {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  padding-left: 176px;
  padding-right: 46px;
  /* font-family: PingFangSC-Regular; */
  font-size: 28px;
  color: #fff;
  text-align: right;
}
.from-input-invoice {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  padding-left: 176px;
  padding-right: 46px;
  text-align: right;
  padding-top: 16px;
}
.from-input-invoice > p {
  width: 100%;
  text-align: right;
  /* font-family: PingFangSC-Regular; */
  font-size: 28px;
  color: #fff;
}
.from-input-other {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  padding-left: 176px;
  padding-right: 46px;
  /* font-family: PingFangSC-Regular; */
  font-size: 28px;
  color: #fff;
  cursor: pointer;
  text-align: right;
}
.from-input-right-icon {
  position: absolute;
  right: 0px;
  top: 0px;
  width: auto;
  height: 100%;
}
.from-input-right-icon > img {
  width: 36px;
  height: auto;
}
.agree-box {
  width: 100%;
  height: auto;
  text-align: center;
  font-size: 24px;
  margin-top: 26px;
  color: #fff;
}
.agree-box > a,
.agree-box > span {
  color: #0ce4a2;
  cursor: pointer;
}
/* 底部购物车等 */
.goods-box {
  z-index: 9;
  width: 100%;
  height: auto;
  padding: 0px;
  min-height: 110px;
  background: #35383f;
  box-shadow: 0 -10px 17px 0 rgba(0, 0, 0, 0.1);
}
/* 提交按钮 */
.submit-btn {
  width: auto;
  height: auto;
  min-height: 110px;
  background-image: linear-gradient(-116deg, #1debac 0%, #1e71f4 100%);
  /* font-family: PingFangSC-Regular; */
  font-size: 36px;
  color: #eeeeee;
  text-align: center;
  min-width: 260px;
  cursor: pointer;
}

.submit-btn > div {
  height: 100%;
  color: #eeeeee;
}

.submit-btn:active {
  opacity: 0.6;
}
/* 左边的功能容器 */
.goods {
  width: auto;
  height: 100%;
  position: relative;
  padding-left: 20px;
}
/* 购物车内容部分 */
.goods-con-box {
  width: auto;
  height: auto;
  text-align: left;
  margin: 0px 0px 0px 10px;
}

.goods-con-tit {
  width: auto;
  height: auto;
  font-size: 26px;
  color: #ebecec;
  opacity: 0.8;
  /* font-family: PingFangSC-Regular; */
}

.goods-con-con {
  width: auto;
  height: auto;
  opacity: 0.8;
  /* font-family: PingFangSC-Regular; */
  padding: 3px 3px 3px 0px;
  font-size: 20px;
  color: #ebecec;
}

.actualPrice-enter {
  margin-right: 5px;
}
.actualPrice-enter > span {
  font-size: 30px;
  color: #ebecec;
}
.originalPrice {
  text-decoration: line-through;
  opacity: 0.4;
  /* font-family: PingFangSC-Regular; */
  font-size: 22px;
  color: #ebecec;
  letter-spacing: 2.8px;
}
.originalPrice-enter-a > span {
  text-decoration: line-through;
  opacity: 0.4;
  font-size: 30px;
  color: #ebecec;
}
</style>
